<script setup lang="ts">
  import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
  import { reqCaidData } from '@/api/module/dataShowApi';
  import { IDataShow, IDataShowParam, ResultCode } from '@/api/types';
  import { useRouter } from 'vue-router';
  import { useLocale } from '@/locales/useLocale';
  import { useInfiniteScroll } from '@vueuse/core';
  import ShowAlert from '@/components/dataShow/ShowAlert.vue';
  import ShowLoading from '@/components/dataShow/ShowLoading.vue';
  import ShowPanel from '@/components/dataShow/ShowPanel.vue';

  const router = useRouter();
  const loading = ref(true);
  const showData = reactive<IDataShow[]>([]);
  const reqParam = reactive<IDataShowParam>({ pageSize: 1, pageNum: 4 });
  const refresh = () => {
    loading.value = true;
    setTimeout(() => {
      loading.value = false;
    }, 1000);
    // reqCaidData(reqParam).then((res) => {
    //   loading.value = false;
    //   if (res.status === ResultCode.OK) {
    //     if (Array.isArray(res.data)) {
    //       showData.push(...res.data);
    //     }
    //   } else {
    //     noMore.value = true;
    //   }
    // });
  };
  refresh();

  const noMore = ref(false);
  const loadFn = () => {
    if (!loading.value && !noMore.value) {
      reqParam.pageNum++;
      refresh();
    }
  };
  const { t } = useLocale();

  const classA = ref<HTMLElement>(null!);
  useInfiniteScroll(classA, loadFn, { distance: 0 });
</script>

<template>
  <div class="dataShowPaneItem p-2 pb-4" ref="classA">
    <ShowPanel :loading="loading" :show-data="showData" v-if="loading || showData.length > 0" />
    <el-empty class="enter-y" :description="t('message.common.noData')" v-else />
    <ShowLoading v-if="loading && showData.length > 0" />
    <ShowAlert v-if="noMore" />
  </div>
</template>

<style lang="scss"></style>
